<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">

	<ui:define name="pageTitle">#{out.recipes_title}</ui:define>
	<ui:define name="header"> -> #{out.recipes_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">

		<h:form id="selectedRecipeForm">
			<p:panelGrid columns="2"
				rendered="#{recipeController.selectedRecipe!=null}">
				<p:panel
					header="#{out.recipes_editRecipe_label}: #{recipeController.selectedRecipe.name}"
					style="width: 400px;">
					<h:outputLabel for="name" value="#{out.recipes_table_name}"
						style="font-weight:bold" />
					<p:inputText id="name" required="true"
						value="#{recipeController.selectedRecipe.name}" />
					<p:message for="name" />
					<br />
					<br />
					<h:outputLabel for="cost" value="#{out.recipes_table_cost}"
						style="font-weight:bold" />
					<p:inputText id="cost" required="true"
						value="#{recipeController.selectedRecipe.cost}">
						<f:validateDoubleRange minimum="0" />
					</p:inputText>
					<p:message for="cost" />
					<br />
					<br />
					<h:outputLabel for="comment" value="#{out.recipes_table_comment}"
						style="font-weight:bold;" />
					<p:editor widgetVar="editorWidget" id="comment"
						style="max-width: 400px;"
						value="#{recipeController.selectedRecipe.comment}" />
					<br />
					<br />
					<p:commandButton update=":recipeForm:recipeTable" ajax="false"
						validateClient="true" action="#{recipeController.updateRecipe()}"
						icon="ui-icon-eject" title="Save Changes"
						value="#{out.save_changes}"></p:commandButton>
					<p:commandButton update=":selectedRecipeForm" ajax="false"
						validateClient="false" immediate="true"
						action="#{recipeController.unselectRecipe()}" icon="ui-icon-close"
						title="Cancel" value="#{out.cancel}"></p:commandButton>
				</p:panel>
				
				<p:panel header="#{out.recipes_components}" style="top:0px;">
					<div class="ui-grid ui-grid-responsive ui-grid-row ui-grid-col-6">
						<h:panelGrid columns="3" style="width:100%" cellpadding="5">
							<h:outputLabel for="selectedMaterialName"
								value="#{out.recipes_selected_material}"
								style="font-weight:bold" />
							<h:outputText
								value="#{recipeController.selectedMaterial.materialName}"
								id="selectedMaterialName" />
							<p:commandButton oncomplete="PF('materialDialog').show()"
								icon="ui-icon-search" title="Select material"
								value="#{out.recipes_select_material}" />
	
							<h:outputLabel for="newComponentQuantity"
								value="#{out.recipes_quantity}" style="font-weight:bold" />
							<p:inputText id="newComponentQuantity"
								value="#{recipeController.selectedMaterialQuantity}" />

							<p:commandButton
								update="componentTableLista selectedMaterialName newComponentQuantity"
								action="#{recipeController.addComponentToList()}"
								icon="ui-icon-close" value="#{out.recipes_add_component}" />

						</h:panelGrid>
					</div>
					<p:separator />
					<br />
					<p:dataTable var="c" id="componentTableLista"
						value="#{recipeController.recipeComponentList}"
						emptyMessage="#{out.empty_message}">
						<p:ajax event="rowSelect" />
						<p:column headerText="#{out.recipes_table_name}">
							<h:outputText value="#{c.materialDTO.materialName}" />
						</p:column>
						<p:column headerText="#{out.recipes_quantityh}">
							<h:outputText value="#{c.quantity}" />
						</p:column>
						<p:column style="width:32px;text-align: center">
							<p:commandButton update="componentTableLista"
								action="#{recipeController.removeComponentFromList()}"
								icon="ui-icon-close" title="Select">
								<f:setPropertyActionListener value="#{c}"
									target="#{recipeController.allMaterialSelectedComponent}" />
							</p:commandButton>
						</p:column>
					</p:dataTable>
				</p:panel>
				<p:dialog header="#{out.importer_select_material}"
					widgetVar="materialDialog" modal="true" showEffect="fade"
					hideEffect="fade" resizable="true">
					<p:outputPanel id="materialDetail" style="text-align:center;">
						<p:dataTable var="material" id="materialTableList"
							value="#{recipeController.allMaterial}" scrollable="true"
							scrollHeight="200" emptyMessage="#{out.empty_message}">
							<p:ajax event="rowSelect" />
							<p:column headerText="#{out.importer_materialname}">
								<h:outputText value="#{material.materialName}" />
							</p:column>
							<p:column headerText="#{out.importer_materialcost}">
								<h:outputText value="#{material.cost}" />
							</p:column>
							<p:column style="width:32px;text-align: center">
								<p:commandButton update="@([id$=selectedMaterialName])"
									oncomplete="PF('materialDialog').hide()"
									icon="ui-icon-plusthick" title="Select">
									<f:setPropertyActionListener value="#{material}"
										target="#{recipeController.selectedMaterial}" />
								</p:commandButton>
							</p:column>
						</p:dataTable>
					</p:outputPanel>
				</p:dialog>
			</p:panelGrid>
		</h:form>

		<p:dialog header="#{out.recipes_new_header}"
			widgetVar="newRecipeDialog" modal="true" showEffect="fade"
			hideEffect="fade">
			<h:form id="newRecipeForm">
				<p:panel rendered="#{recipeController.selectedRecipe!=null}"
					style="width: 400px;">
					<h:panelGrid columns="3" cellpadding="5">
						<h:outputLabel for="name1" value="#{out.recipes_table_name}"
							style="font-weight:bold" />
						<p:inputText id="name1" required="true"
							value="#{recipeController.selectedRecipe.name}" />
						<p:message for="name1" />
						<h:outputLabel for="cost1" value="#{out.recipes_table_cost}"
							style="font-weight:bold" />
						<p:inputText id="cost1" required="true"
							value="#{recipeController.selectedRecipe.cost}">
							<f:validateDoubleRange minimum="0" />
						</p:inputText>
						<p:message for="cost1" />
					</h:panelGrid>
					<br />
					<h:outputLabel for="comment1" value="#{out.recipes_table_comment}:"
						style="font-weight:bold;" />
					<br />
					<p:editor widgetVar="editorWidget" id="comment1"
						style="max-width: 400px;"
						value="#{recipeController.selectedRecipe.comment}" />
					<br />
					<p:commandButton update=":recipeForm:recipeTable" ajax="true"
						validateClient="true" action="#{recipeController.updateRecipe()}"
						oncomplete="PF('newRecipeDialog').hide()" icon="ui-icon-eject"
						title="Save Changes" value="#{out.save}"></p:commandButton>
					<p:commandButton validateClient="false" immediate="true"
						action="#{recipeController.unselectRecipe()}"
						oncomplete="PF('newRecipeDialog').hide()" icon="ui-icon-close"
						title="Cancel" value="#{out.cancel}"></p:commandButton>
				</p:panel>
			</h:form>
		</p:dialog>

		<!-- Create new beer-->
		<h:form id="newBeerForm">
			<p:panel
				header="#{out.recipes_create_beer_to_recipe_label}: #{recipeController.selectedRecipe.name}"
				style="margin:20px 0px" rendered="#{recipeController.newBeer!=null}">

				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="name"
						value="#{out.recipes_createBeerTable_name}"
						style="font-weight:bold" />
					<p:inputText id="name" value="#{recipeController.newBeer.name}"
						style="padding-left:10px" />

					<h:outputLabel for="price"
						value="#{out.recipes_createBeerTable_price}"
						style="font-weight:bold" />
					<p:inputText id="price" value="#{recipeController.newBeer.price}"
						style="padding-left:10px" />

					<h:outputLabel for="color"
						value="#{out.recipes_createBeerTable_color}"
						style="font-weight:bold" />
					<p:inputText id="color" value="#{recipeController.newBeer.color}"
						style="padding-left:10px" />

					<h:outputLabel for="type"
						value="#{out.recipes_createBeerTable_type}"
						style="font-weight:bold" />
					<p:inputText id="type" value="#{recipeController.newBeer.type}"
						style="padding-left:10px" />

					<h:outputLabel for="alkcontent"
						value="#{out.recipes_createBeerTable_alcoholContent}"
						style="font-weight:bold" />
					<p:inputText id="alkcontent"
						value="#{recipeController.newBeer.alcoholContent}"
						style="padding-left:10px" />

					<h:outputLabel for="ispremium" value="Premium"
						style="font-weight:bold" />
					<p:selectBooleanCheckbox id="ispremium"
						value="#{recipeController.newBeer.isPremium}" />
				</h:panelGrid>
				<p:commandButton update=":recipeForm:recipeTable"
					action="#{recipeController.addBeer()}" icon="ui-icon-eject"
					title="#{out.recipes_createBeerTable_createButton}"
					value="#{out.recipes_createBeerTable_createButton}">
				</p:commandButton>

				<p:commandButton update=":newBeerForm"
					action="#{recipeController.unsetBeer()}" icon="ui-icon-close"
					title="#{out.recipes_createBeerTable_cancelButton}"
					value="#{out.recipes_createBeerTable_cancelButton}">
				</p:commandButton>
			</p:panel>
		</h:form>

		<!-- edit beer-->
		<h:form id="editBeerForm">
			<p:panel
				header="#{out.recipes_editBeer_label}: #{recipeController.selectedBeer.name}"
				style="margin:20px 0px"
				rendered="#{recipeController.selectedBeer!=null}">
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="name"
						value="#{out.recipes_createBeerTable_name}"
						style="font-weight:bold" />
					<p:inputText id="name"
						value="#{recipeController.selectedBeer.name}"
						style="padding-left:10px" />

					<h:outputLabel for="price"
						value="#{out.recipes_createBeerTable_price}"
						style="font-weight:bold" />
					<p:inputText id="price"
						value="#{recipeController.selectedBeer.price}"
						style="padding-left:10px" />

					<h:outputLabel for="color"
						value="#{out.recipes_createBeerTable_color}"
						style="font-weight:bold" />
					<p:inputText id="color"
						value="#{recipeController.selectedBeer.color}"
						style="padding-left:10px" />

					<h:outputLabel for="type"
						value="#{out.recipes_createBeerTable_type}"
						style="font-weight:bold" />
					<p:inputText id="type"
						value="#{recipeController.selectedBeer.type}"
						style="padding-left:10px" />

					<h:outputLabel for="alkcontent"
						value="#{out.recipes_createBeerTable_alcoholContent}"
						style="font-weight:bold" />
					<p:inputText id="alkcontent"
						value="#{recipeController.selectedBeer.alcoholContent}"
						style="padding-left:10px" />

					<h:outputLabel for="ispremium" value="Premium"
						style="font-weight:bold" />
					<p:selectBooleanCheckbox id="ispremium"
						value="#{recipeController.selectedBeer.isPremium}" />
				</h:panelGrid>

				<p:commandButton update=":recipeForm:recipeTable"
					action="#{recipeController.updateBeer()}" icon="ui-icon-eject"
					title="#{out.recipes_createBeerTable_updateButton}"
					value="#{out.recipes_createBeerTable_updateButton}">
				</p:commandButton>

				<p:commandButton update=":editBeerForm"
					action="#{recipeController.unsetBeer()}" icon="ui-icon-close"
					title="#{out.recipes_createBeerTable_cancelButton}"
					value="#{out.recipes_createBeerTable_cancelButton}">
				</p:commandButton>
			</p:panel>
		</h:form>

		<h:form id="recipeForm">
			<p:growl id="msgs" showDetail="true" />
			<p:dataTable var="currentRecipe" value="#{recipeBean.recipeModel}"
				selectionMode="single"
				selection="#{recipeController.selectedRecipe}"
				rowKey="#{currentRecipe.id}" paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" id="recipeTable" lazy="true"
				emptyMessage="#{out.empty_message}">
				<p:ajax event="rowSelect" listener="#{recipeController.onRowSelect}"
					update=":recipeForm:msgs" />
				<p:ajax event="rowUnselect"
					listener="#{recipeController.onRowUnselect}"
					update=":recipeForm:msgs" />
				<!--
<p:column headerText="ID" sortBy="#{currentRecipe.id}"
        filterBy="#{currentRecipe.id}">
        <h:outputText value="#{currentRecipe.id}" />
</p:column>
                -->
				<p:column headerText="#{out.recipes_table_name}"
					sortBy="#{currentRecipe.name}" filterBy="#{currentRecipe.name}">
					<h:outputText value="#{currentRecipe.name}" />
				</p:column>
				<p:column headerText="#{out.recipes_table_cost}"
					sortBy="#{currentRecipe.cost}">
					<h:outputText value="#{currentRecipe.cost}" />
				</p:column>
				<p:column headerText="#{out.recipes_table_beerPairing}">
					<p:commandButton value="#{out.recipes_table_createBeerButton}"
						rendered="#{currentRecipe.getBeer()==null}"
						action="#{recipeController.initBeer()}" update=":newBeerForm">
						<f:setPropertyActionListener value="#{currentRecipe}"
							target="#{recipeController.selectedRecipe}" />
					</p:commandButton>

					<h:outputLabel for="name"
						value="#{currentRecipe.getBeer().getName()}"
						rendered="#{currentRecipe.getBeer()!=null}"
						style="font-weight:bold" />
				</p:column>
				<p:column headerText="#{out.recipes_table_editBeerButton}">
					<p:commandButton value="#{out.recipes_table_editBeerButton}"
						rendered="#{currentRecipe.getBeer()!=null}"
						action="#{recipeController.editBeer()}" update=":editBeerForm">
						<f:setPropertyActionListener value="#{currentRecipe}"
							target="#{recipeController.selectedRecipe}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>
		</h:form>
		<h:form id="recipeCommandsForm">
			<h:panelGrid columns="4" cellpadding="5"
				headerText="#{out.recipes_table_details}">
				<p:commandButton update=":recipeForm:recipeTable"
					action="#{recipeController.removeRecipe()}" icon="ui-icon-trash"
					title="Delete" value="#{out.recipes_table_deleteButton}">
				</p:commandButton>
				<p:commandButton update=":selectedRecipeForm"
					icon="ui-icon-arrowrefresh-1-n" title="Update"
					action="#{recipeController.updateRecipeForm()}"
					value="#{out.recipes_table_EditButton}">
				</p:commandButton>
				<p:commandButton update=":newRecipeForm"
					icon="ui-icon-arrowrefresh-1-n" title="Update2"
					action="#{recipeController.addRecipe()}"
					oncomplete="PF('newRecipeDialog').show()"
					value="#{out.recipes_newRecipe_addButton}">
				</p:commandButton>
			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>
